<template>
  <div class="box">
      <!-- <span v-for="(item,index) in indexs" :key="index">{{words[item]}}</span> -->
      <!-- <span>A</span>
      <span>B</span> -->
      <span>{{words[index]}}</span>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      height: 0,
      set: null,
      index: 0,
      indexs: [],
      words: [
        'z',
        'x',
        'c',
        'v',
        'b',
        'n',
        'm',

        's',
        'd',
        'g',
        'h',
        'j'
      ]
    }
  },
  methods: {
    down () {
      clearInterval(this.set)
      console.log(this.set)
      this.index = parseInt(Math.random() * (11 + 1))
      const word = document.querySelector('span')
      // eslint-disable-next-line prefer-const
      let box = document.querySelector('.box')
      // eslint-disable-next-line prefer-const
      let width = parseInt(Math.random() * (box.clientWidth - 25))
      word.style.left = `${width}px`
      word.innerHTML = this.words[this.index]
      let count = 0
      this.set = setInterval(() => {
        count += 1
        word.style.top = `${count}px`
        if (count > 180) {
          this.down()
        }
      }, 50)
    },
    bindEvent (set) {
      const span = document.querySelector('span')
      // 按键时间监听
      document.addEventListener('keydown', (Event) => {
        // eslint-disable-next-line eqeqeq
        if (Event.key == span.innerHTML) {
          span.innerHTML = '11'
          clearInterval(set)
          console.log(this)
          this.down()
        }
      })
    }
    // 元素下落高度监听
  },
  created () {
    console.log('create')
  },
  mounted () {
    clearInterval(this.set)
    this.down()
    this.bindEvent()
  }
}
</script>

<style scoped>
    .box {
        /* border: 1px solid red; */
        width:88%;
        height: 200px;
        display: inline-block;
        margin-left: 50%;
        transform: translate(-50%);
        overflow: hidden;
    }
    span {
        position: relative;
        top: 0px;
        margin: 0 25px;
        font-size: 40px;
    }
</style>
